<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>rtmp_info</title>
    <script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>

<body>
    <div id="rtmptitle" style="width:1800px; height:200px;"></div>
    <div id="vbar" style="width:1800px; height:200px;"></div>
    <div id="kbar" style="width:1800px; height:200px;"></div>
    <div id="abar" style="width:1800px; height:200px;"></div>
    <script>
        var vchart = echarts.init(document.getElementById('vbar'), 'white', { renderer: 'canvas' });
        var kchart = echarts.init(document.getElementById('kbar'), 'white', { renderer: 'canvas' });
        var achart = echarts.init(document.getElementById('abar'), 'white', { renderer: 'canvas' });

        $(
            function () {
                fetchvideoData(vchart);
                setInterval(fetchvideoData, 6000);
            }
        );
        function fetchvideoData() {
            $.ajax({
                type: "GET",
                url: "http://10.10.10.9:5000/barVideoChart/{{ app }}/{{ stream }}",
                dataType: 'json',
                success: function (result) {
                    vchart.setOption(result);
                }
            });
        }

        $(
            function () {
                fetchkeyData(kchart);
                setInterval(fetchkeyData, 6000);
            }
        );
        function fetchkeyData() {
            $.ajax({
                type: "GET",
                url: "http://10.10.10.9:5000/barKeyChart/{{ app }}/{{ stream }}",
                dataType: 'json',
                success: function (result) {
                    kchart.setOption(result);
                }
            });
        }


        $(
            function () {
                fetchaudioData(achart);
                setInterval(fetchaudioData, 6000);
            }
        );
        function fetchaudioData() {
            $.ajax({
                type: "GET",
                url: "http://10.10.10.9:5000/barAudioChart/{{ app }}/{{ stream }}",
                dataType: 'json',
                success: function (result) {
                    achart.setOption(result);
                }
            });
        }
        t_obj = document.getElementById('rtmptitle')
        t_obj.innerHTML = "<div align='center'><br/><b>RTMP直播流分析</b><br/></div><div>流信息:  APP={{ app }}  stream={{ stream }}<br/><br/>视频编码:  {{ video_code }}<br/>音频编码: {{ audio_code }}<br/>{{ tnx }}<br/></div>"
    </script>
</body>

</html>